<template>
    <div class="content">
        <div class="module-area">
            <moduleArea @component-selected="onComponentSelectedFromModule" />
        </div>
        <div class="preview-area">
            <previewArea ref="previewAreaRef" @component-selected="onComponentSelected" @header-selected="onHeaderSelected" />
        </div>
        <div class="configure-area">
            <configureArea ref="configureAreaRef" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import moduleArea from '../components/moduleArea.vue';
import previewArea from '../components/previewArea.vue';
import configureArea from '../components/configureArea.vue';

const previewAreaRef = ref()
const configureAreaRef = ref()

// 处理从 moduleArea 传来的组件选择事件
const onComponentSelectedFromModule = (component: any) => {
    console.log('从模块区域选择组件:', component)
    // 添加到预览区域
    if (previewAreaRef.value) {
        previewAreaRef.value.addComponent(component)
    }
}

// 处理组件选择事件
const onComponentSelected = (component: any) => {
    console.log('组件被选中:', component)
    if (configureAreaRef.value) {
        configureAreaRef.value.setSelectedComponent(component)
    }
}

// 处理 Header 选中事件
const onHeaderSelected = () => {
    console.log('Header 被选中')
    if (configureAreaRef.value && previewAreaRef.value) {
        // 获取当前的 header 配置
        const currentConfig = previewAreaRef.value.getHeaderConfig()
        // 设置配置区域的 header 配置
        configureAreaRef.value.setHeaderConfig(currentConfig, (config: any) => {
            // 更新预览区域的 header 配置
            if (previewAreaRef.value) {
                previewAreaRef.value.updateHeaderConfig(config)
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    justify-content: space-between;
}

.module-area {
    padding: 16px;
    width: 280px;
    min-height: calc(-95px + 100vh);
    background-color: #fff;
}

.preview-area {
    display: flex;
    justify-content: center;
    flex: 1;
}

.configure-area {
    flex-grow: 0;
    flex-shrink: 0;
    width: 320px;
    min-height: calc(-95px + 100vh);
    color: #333;
    background-color: #fff;
    padding: 16px;
}
</style>